<template>
    <div class="show-commnets w-full min-h-[3.125rem]">
        <div v-if="props.hasTitle" class="title h-[3.125rem] leading-[3.125rem]">评论区</div>
        <div v-for="(item, index) in commentsList" class="pushComment flex mt-3">
            <div class="avatar w-[10%] flex  justify-center">
                <n-avatar round :size="props.avatarSize" :src="item.avatarUrl" object-fit="cover"
                    fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
            </div>
            <div class="show_reply w-[85%]">
                <div class="w-full flex items-center justify-between flex-wrap">
                    <div class="name w-full text-[16px] font-bold">
                        {{ item.nickName }}
                        <span v-if="item.parentName">回复给 @{{ item.parentName }}</span>
                    </div>
                    <div class="content w-full text-[16px] mt-2 mb-2 whitespace-pre-wrap leading-relaxed">
                        {{ item.content }}
                    </div>
                    <div class="shwo-pic w-full text-[16px] mb-2">
                        <blow-picture :img-url="item.contentImg"></blow-picture>
                    </div>
                    <div class="time w-full text-[12px] text-[#999] flex">
                        <div class="date mr-3"> {{ item.createTime }}</div>
                        <div v-if="auth" class="reply cursor-pointer" @click="reply(item, index)"> 回复</div>
                    </div>
                    <!-- 评论回复窗口 -->
                    <div v-if="showReply == index" class="w-full mt-3">
                        <blog-input ref="blogInput" class="w-full" :placeholder="replyWho" @submit="sub" />
                    </div>
                    <!-- 二级评论展示和回复 -->
                    <show-comments v-if="item.childComment?.length" :avatar-size="35" :has-title="false"
                        :data="item.childComment" :key-change-head-id="false" :head-id="item.id" @sucess="refresh" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import BlogInput from '@/components/input/blogInput.vue';
import blowPicture from '@/components/blowPic/blowPicture.vue';
import { useRouter } from 'vue-router';
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler';
import { pushArticleComment } from '@/api/article/index';
import { useMessage } from 'naive-ui'
import { secureStorage } from '@/utils/secureStorage';
interface pushForm {
    id?: number | string;
    articleId: number | string;
    // articlePostId: number | string;
    userId: number | string;
    nickName: string | string;
    content: string | string;
    contentImg?: string[];
    headId?: number | string;
    parentName?: string | string;
}
const auth = secureStorage.get('token')
const message = useMessage()
const router = useRouter()
const showReply = ref(null);
const props = defineProps({
    data: {
        type: Object,
        required: true,
        default: () => [],
    },
    avatarSize: {
        type: Number,
        default: 50,
    },
    hasTitle: {
        type: Boolean,
        default: true,
    },
    // 确保保持首项评论已知
    keyChangeHeadId: {
        type: Boolean,
        default: true,
    },
    headId: {
        type: Number,
        default: '',
    },
});
const replyWho = ref('回复给'); // 回复给谁
const article = ref(); // 文章
const blogInput = ref(); // 评论输入框
const headId = ref(); // 头部评论id
// emit
const $emit = defineEmits(['sucess']);
// 确保获取到的数据结构正确
const commentsList = computed(() => {
    if (props.data.commentsList) {
        return props.data.commentsList;
    } else {
        return props.data;
    };
})
// 回复评论
const reply = (item: any, index: any) => {
    if (props.keyChangeHeadId) { 
        // 保证头部评论正确
        headId.value = item.id; // 头部评论id
    }
    article.value = item; // 文章
    // 如果当前点击的评论已经展开，则收起
    if (showReply.value == index) {
        showReply.value = null;
        return;
    }
    // 回复给
    replyWho.value = '回复给'
    replyWho.value += item.nickName + ':';
    // 展开
    showReply.value = index;
}
const sub = async (e: pushForm) => {
    
    e.articleId = router.currentRoute.value.query.id as string; // 文章id
    e.headId = props.headId ? props.headId : article.value.id ; // 评论id
    e.parentName = article.value.nickName; // 回复给的昵称
    let res = await AsyncTaskHandler.handleSingleTask(pushArticleComment(e))
    if (res.code == 0) {
        blogInput.value[0].reset()
        message.success(res.data)
        showReply.value = null
        $emit('sucess')
    } else { 
        message.error(res.msg)
    }
}
const refresh = () => {
    $emit('sucess')
}
</script>

<style scoped lang="scss">
.title {
    display: flex;
    align-items: center;
    font-size: 24px;
}

.title::before {
    content: "";
    display: inline-block;
    width: .125rem;
    height: 3.125rem;
    background-color: #000;
    margin-right: 8px;
}
</style>